<template>
    <div class="head-line">工作日志</div>
    <div class="input-content">
        <el-input v-model="textarea" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请填写今日工作日志" />
    </div>
    <div class="but-box">
        <el-button type="primary" size="default" @click="saveDatas">提交日志</el-button>
    </div>
</template>
<script>
    // onBeforeMount, onMounted, onBeforeUpdate, onBeforeUnmount, onUnmounted
    import { ref, reactive, onBeforeMount, onMounted } from "vue";
    import axios from "axios";
    import { ElMessage } from 'element-plus';
    import { ElMessageBox } from 'element-plus'

    // 导入刚刚定义的Pinia状态管理器中的useUserStore仓库
    import { useUser } from '@/stores/login'
    import { storeToRefs } from 'pinia'

    export default {
        name: 'TemplatesNav',
        setup() {
            let textarea = ref();

            // 创建变量接受
            const store = useUser();

            let { user_name, if_users } = storeToRefs(store)

            // 提交日志
            function saveDatas() {
                console.log("提交了今天的日志,内容是：", textarea.value);

                let if_id = ref();

                let url = "http://localhost:8080/users/";
                axios.get(url)
                    .then(function (response) {
                        console.log(response.data.data);
                        let array01 = response.data.data;

                        // 判断是哪个用户
                        for (let index = 0; index < array01.length; index++) {
                            let element = array01[index].username;
                            let id = array01[index].id;
                            console.log(element);

                            if (element === if_users.value.name) {
                                console.log("成功");
                                console.log("当前id：", id);
                                // console.log(if_id);


                                axios.put("http://localhost:8080/users/", {
                                    id: id,
                                    usertarget: textarea.value,
                                })
                                    .then(function (response) {
                                        console.log(response);
                                    })
                                    .catch(function (error) {
                                        console.log(error);
                                    })

                            } else {
                                console.log("失败");
                            }
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    })


            }




            return {
                textarea,
                saveDatas
            }
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .head-line {
        width: 100%;
        height: 50px;
        position: relative;
        line-height: 50px;
        /* border: 1px solid red; */
        font-weight: 600;
        background: #fff;
        padding-left: 20px;
        /* margin-bottom: 15px; */
    }

    .head-line::after {
        content: "";
        position: absolute;
        left: 0;
        top: 16px;
        margin-left: 10px;
        display: block;
        width: 3.5px;
        height: 18px;
        background: #51B37F;
        border-radius: 5px;
        /* border: 1px solid red; */
    }

    /* .el-table-column {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    } */

    .el-form-item {
        margin-top: 10px;
    }

    .input-content {
        width: 100%;
        /* height: 420px; */
        padding: 0 40% 0 10px;
        /* border: 1px solid red; */
    }

    .but-box {
        width: 100%;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        /* border: 1px solid red; */
    }

    .el-button {
        /* margin-top: 15px; */
        padding: 0 10px;
        /* margin-bottom: 15px; */
        background: #51B37F;
    }
</style>